<style>
    /* styles.css */
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: 'Microsoft YaHei', Arial, sans-serif;
        background-color: #f5f5f5;
    }

    .chat-container {
        display: flex;
        height: 100vh;
    }

    .contacts-list {
        width: 250px;
        background: #fff;
        border-right: 1px solid #ddd;
        overflow-y: auto;
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
    }

    .contacts-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .contacts-list li {
        padding: 10px 15px;
        cursor: pointer;
        transition: background 0.2s;
        color: #333;
        display: flex;
        align-items: center;
        position: relative;
    }

    .contacts-list li img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .contacts-list li .contact-info {
        flex-grow: 1;
    }

    .contacts-list li .name {
        font-weight: bold;
        margin-bottom: 2px;
    }

    .contacts-list li .latest-message {
        color: #999;
        font-size: 14px;
    }

    .contacts-list li .time {
        color: #999;
        font-size: 12px;
        position: absolute;
        right: 15px;
    }

    .contacts-list li:hover,
    .contacts-list li.active {
        background: #eaeaea;
    }

    .chat-area {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: -1px 0 3px rgba(0, 0, 0, 0.1);
    }

    #chatHeader {
        background: #f5f5f5;
        padding: 10px 15px;
        border-bottom: 1px solid #ddd;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;
    }

    #chatAvatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .messages {
        flex-grow: 1;
        overflow-y: auto;
        padding: 10px 15px;
        display: flex;
        flex-direction: column;
    }

    .message {
        margin: 5px 0;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: relative;
    }

    .message .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .message .content {
        max-width: 70%;
        padding: 8px 12px;
        border-radius: 4px;
        word-wrap: break-word;
        line-height: 1.5;
        word-break: break-all; /* 确保长单词或URL不会撑破容器 */
    }

    .message.received .content {
        background: #d9e6f2; /* 对方消息的背景色 */
        color: #333;
    }

    .message.sent .content {
        background: #dcf8c6; /* 用户消息的背景色 */
        text-align: left; /* 文本左对齐 */
        color: #333;
    }

    .message .time {
        color: #999;
        font-size: 12px;
        margin-top: 5px;
        position: absolute;
        bottom: 0;
        background: #fff;
        padding: 0 5px;
        border-radius: 2px;
        z-index: 1; /* 确保时间在消息背景之上 */
    }

    .message.received .time {
        left: 0;
    }

    .message.sent .time {
        right: 0;
    }

    .message.sent {
        justify-content: flex-end; /* 将用户发出的消息对齐到右边 */
    }

    .message.sent .avatar {
        margin-left: 10px;
        margin-right: 0;
    }

    footer {
        display: flex;
        padding: 10px 15px;
        border-top: 1px solid #ddd;
        background: #f9f9f9;
        align-items: center;
    }

    footer textarea {
        flex-grow: 1;
        padding: 8px 12px;
        margin-right: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        color: #333;
        resize: none; /* 防止用户调整大小 */
        min-height: 50px; /* 设置最小高度 */
        max-height: 100px; /* 设置最大高度 */
    }

    footer button {
        padding: 8px 16px;
        border: none;
        background: #7ec1ff;
        color: white;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }

    footer button:hover {
        background: #5da9ff;
    }
</style>